<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="/examples/public/favicon.ico" >
  <title>Document</title>
  <link rel="stylesheet" href="./css/common.css">
</head>

<style>

 body a, h3{
   color: white;
 }

 body {
   display: flex;
   flex-wrap: wrap;
 }

 body a::visited {
  color: white;
 }

 .module-box {
  display: flex;
  flex-direction: column;
  margin: 12px;
  margin-bottom: 24px;
 }

 .module-box h3 {
   margin-bottom: 12px;
 }

 .module-box .children-box {
   display: flex;
   flex-direction: column;
  }

  .children-box a {
    margin: 4px 0;
  }
</style>

<body>
  <script>

    const tree = [
      {
        router: 'engine',
        children: [
          '/Engine.html',
          '/ModelingEngine.html',
          '/DisplayEngine.html',
          '/ModelingEngineSupport.html',
          '/DisplayEngineSupport.html'
        ]
      },
      {
        router: 'plugin',
        children: [
          '/WebGLRendererPlugin.html',
          '/AxesHelperPlugin.html',
          '/GridHelperPlugin.html',
          '/ObjectHelperPlugin.html',
          '/ViewpointPlugin.html',
          '/DisplayModePlugin.html',
          '/SelectionPlugin.html',
          '/StatsPlugin.html'
        ]
      },
      {
        router: 'support',
        children: [
          '/CameraSupport.html',
          '/MeshSupport.html',
          '/SpriteSupport.html',
          '/LineSupport.html',
          '/PointsSupport.html',
          '/LightSupport.html',
          '/GroupSupport.html',
          '/TextureSupport.html',
          '/EventSupport.html'
        ]
      },
      {
        router: 'manager',
        children: [
          '/EventManager.html',
          '/LoaderManager.html',
          '/ResourceManager.html',
        ]
      },
      {
        router: 'modifier',
        children: [
          '/BooleanModifier.html',
        ]
      },
      {
        router: 'helper',
        children: [
          '/PointLightHelper.html',
          '/CameraHelper.html',
          '/GroupHelper.html',
        ]
      },
      {
        router: 'displayer',
        children: [
          '/TextureDisplayer.html',
        ]
      },
      {
        router: 'convenient',
        children: [
          '/History.html',
        ]
      },
      {
        router: 'develop',
        children: [
          '/configure.html',
          '/Vue3.html',
        ]
      },
    ]

    tree.forEach(module => {

      let childrenDom = ''

      if (module.children && module.children.length) {
        for (let url of module.children) {
          childrenDom += `<a href="${module.router}${url}">${url.split('/').pop()}</a>`
        }
      }
      const moduleDom = document.createElement('div')
      moduleDom.className = 'module-box'
      moduleDom.innerHTML = `
        <h3>${module.router.toLocaleUpperCase()}</h3>
        <div class="children-box">
          ${childrenDom}
        </div>
      `

      document.body.appendChild(moduleDom)
    })
  </script>
</body>
</html>